<template>
  <div class="bookcontent">
    <div class="nav">
      <van-nav-bar
        left-text="返回"
        :title="title"
        left-arrow
        @click-left="back"
      >
      </van-nav-bar>
    </div>
    <div class="bookcnt" v-html="contents"></div>
    <div class="foot">
      <div class="pre"><a href="#" @click="getPreBook">上一章</a></div>
      <div class="cnt"><a href="#" @click="getid(bookId)">目录</a></div>
      <div class="next"><a href="#" @click="getNextBook">下一章</a></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "bookcontent",
  data() {
    return {
      contents: "",
      title: "",
      cataloglist: "",
      bookId: "",
      secId: "",
    };
  },
  created() {
    this.bookId = this.$route.params.bookId;
    this.secId = this.$route.params.secId;
    this.getBookContent(this.bookId, this.secId);
    this.getCatalogue(this.bookId);
    this.getNoveltitle(this.bookId);
  },
  methods: {
    //返回上一级
    back() {
      this.$router.go(-1);
    },
    //根据id获取书籍标题
    getNoveltitle(id) {
      //发起申请
      this.axios({
        //请求类型
        method: "get",
        //请求路径
        url: "https://apis.netstart.cn/yunyuedu/book/getsub.json",
        params: {
          id,
        },
      })
        .then((result) => {
          this.title = result.data.feed.entry.title;
        })
        .catch((err) => {
          console.log("err ==> ", err);
        });
    },
    //获取章节内容
    getBookContent(source_uuid, content_uuid) {
      //发起申请
      this.axios({
        //请求类型
        method: "get",
        //请求路径
        url: "https://apis.netstart.cn/yunyuedu/reader/book/content.json",
        params: {
          source_uuid,
          content_uuid,
        },
      })
        .then((result) => {
          this.contents = result.data.data.content;
        })
        .catch((err) => {
          console.log("err ==> ", err);
        });
    },
    //根据id获取书籍目录
    getCatalogue(source_uuid) {
      //发起申请
      this.axios({
        //请求类型
        method: "get",
        //请求路径
        url: "https://apis.netstart.cn/yunyuedu/reader/book/info.json",
        params: {
          source_uuid,
        },
      })
        .then((result) => {
          this.cataloglist = result.data.data.catalog;
        })
        .catch((err) => {
          console.log("err ==> ", err);
        });
    },
    //上一章
    getPreBook() {
      // let catalogList = this.cataloglist;
      for (let i = 0; i < this.cataloglist.length; i++) {
        if (this.cataloglist[i].secId == this.secId) {
          let a = this.cataloglist[i - 1].secId;
          this.secId = a;
          this.getBookContent(this.bookId, this.secId);
        }
      }
    },
    //下一章
    getNextBook() {
      for (let i = 0; i < this.cataloglist.length; i++) {
        if (this.cataloglist[i].secId == this.secId) {
          let a = this.cataloglist[i + 1].secId;
          this.secId = a;
          this.getBookContent(this.bookId, this.secId);
          return a;
        }
      }
    },
    //传递书籍的id
    getid(pid) {
      this.$router.push({ name: "catalogue", params: { pid } });
    },
  },
};
</script>

<style lang="less" scoped>
.bookcontent {
  width: 100%;
  height: 100%;
  .bookcnt {
    background-color: #eee;
    padding: 20px;
    text-indent: 28px;
    font-size: 15px;
    padding-bottom: 50px;
  }
  .foot {
    width: 100%;
    height: 50px;
    line-height: 50px;
    display: flex;
    text-align: center;
    position: fixed;
    bottom: 0;
    background-color: #fff;
    .pre {
      width: 33%;
    }
    .cnt {
      width: 34%;
    }
    .next {
      width: 33%;
    }
  }
}
</style>